<template>
	<view>
		<view class="nav_top" :style="{'background-color':hasBgc}">
			<view class="status-bar" :style="{height:addHight}"></view>
			<view class="topContent">
				<view 
					class="title" 
					:style="{color:color,'text-align':center,width:width,'margin-left':cos}"
				>
					<image v-if="isInput" class='img' src="https://eshop-goods.obs.cn-north-4.myhuaweicloud.com/mch_logo/log.png" mode=""></image>
					<view class="name">{{title}}</view>
				</view>
				<view class="uni-form-item" @click="goToSearch" v-if="isInput">
					<icon class='icon' type="search" size="14" />
					<text class='font'>搜索</text>
				</view>
			</view>
		</view>
		<view v-if="isHeight" class="marginBox" :style="{height:barHeight.allHeight+'px'}"></view>
	</view>
</template>
 
<script>
	import {mapState} from 'vuex'
	
	export default {
		props:{
			title:{
				type:String,
				default:'XXX'
			},
			hasBgc:{   //背景色
				type:String,
				default:'#5FCBAD'
			},
			color:{ //字体颜色
				type:String,
				default:'#fff;'
			},
			isBack:{   //是否有返回箭头
				type: Boolean,
				default:false
			},
			backColor:{ //回退箭头颜色
				type:String,
				default:'white'
			},
			isHeight:{   //头部撑开高度
				type:Boolean,
				default:true
			},
			isNavBack:{   //固定返回前面的页面
				type:Boolean,
				default:true
			},
			backUrl:{    //返回到那个页面
				type:String,
				default:'index'
			},
			backNum:{   //返回几个页面
				type:Number,
				default:1
			},
			isInput: { // 是否显示input
				type:Number,
				default:1
			},
			center: {
				type:String,
				default:'left'
			},
			width: {
				type:String,
				default:'auto'
			},
			cos: {
				type:String,
				default:'30upx'
			}
		},
		computed:{
			...mapState(['barHeight'])
		},
		data() {
			return {
				addHight:'0px'
			};
		},
	
		methods:{
			goBack(url){
				this.$store.state.moreStepBack = false
				if(this.isNavBack){
					const that = this
					uni.navigateBack({
						delta:that.backNum
					})
				}else{
					var isUrl = `/pages/${url}/${url}`
					console.log(isUrl)
					uni.switchTab({
						url: isUrl
					})
				}
			},
			goToSearch() {
				uni.navigateTo({
					url: `../search/searchHistory`
				})
			},
		},
		mounted() {
			if(this.barHeight.statusBarHeight){
				this.addHight = this.barHeight.statusBarHeight + 'px'
			}else{
				this.isBarHeight999().then((isTemp)=>{
					this.$store.state.barHeight = isTemp
					this.addHight = isTemp.statusBarHeight + 'px'
				})
			}
		
		}
	}
</script>
 
<style lang="scss">
.nav_top{
	width: 100vw;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 900;
	display: flex;
	flex-direction: column;
	background-color: transparent;
	padding:0 20upx;
	&.bgColor{
		background-color: #5FCBAD;
	}
	.topContent{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		width: 100vw;
		height: auto;
		position: relative;
		.goBack{
			position: absolute;
			top: 0;
			left: 0;
			width: 10vw;
			height: 100upx;
			display: flex;
			align-items: center;
			padding-left: 20upx;
			box-sizing: border-box;
			image{
				width: 40upx;
				height: 42upx;
			}
		}
		.title{
			display: flex;
			align-items: center;
			text-align: left;
			// margin-left: 30upx;
			// width: 200upx;
			height: 100%;
			line-height: 80upx;
			font-size: 32upx;
			font-family:'自定义字体';
			.img{
				width:50upx;
				height:50upx;
				border-radius: 50%;
			}
			.name{
				margin-left:10upx;
			}
		}
		.uni-form-item {
			// flex:1;
			display: flex;
			align-items: center;
			width: 710upx;
			justify-content: flex-start;
			padding: 12upx 10upx;
			margin:20upx 0;
			// background-color: rgba(231, 231, 231, 1);
			// border: 1px solid #fff;
			border-radius: 20px;
			// text-align: center;
			font-size: 24upx;
			color: #999999;
			background: #fff;
			.icon {
				margin-left: 3upx;
			}
			.font{
				font-size: 28upx;
				line-height: 40upx;
				margin-left: 10upx;
			}
		}
	}
	
}
</style>
